<template lang="html">
  <div class="pro-create-edit">
    <div class="wrapper">
      <div class="create-left">
        <i class="icon"></i>
      </div>
      <div class="create-right">
        <h2 class="title">编辑项目</h2>
        <div class="items">
          <h3 class="tit"> <i class="icon icon1"></i> 项目名称:</h3>
          <el-input :disabled="true" class="input" v-model="jobName"></el-input>
        </div>
        <div class="items">
          <ul class="item-tit">
            <li class="item-name"> <i class="icon icon2"></i> 编程语言</li>
            <li class="item-name"> <i class="icon icon3"></i> 算法框架</li>
          </ul>
          <ul class="item-con">
            <li class="item-select">
              <el-select v-model="language">
                 <el-option
                   v-for="item in languageArr"
                   :key="item.name"
                   :value="item.name">
                 </el-option>
               </el-select>
            </li>
            <li class="item-select">
              <el-select v-model="algorithm">
                 <el-option
                   v-for="item in algorithmArr"
                   :key="item.name"
                   :value="item.name">
                 </el-option>
               </el-select>
            </li>
          </ul>
        </div>
        <el-form label-position="top" :rules="rulesForm" :model="projectForm" ref="projectForm" @submit.native.prevent>
          <el-form-item prop="profile">
            <div class="items">
              <h3 class="tit"> <i class="icon icon4"></i>项目描述（选填）</h3>
              <el-input class="input" v-model="projectForm.profile" autocomplete="off" placeholder="对项目做简单的描述..."></el-input>
            </div>
          </el-form-item>
        </el-form>

        <div class="items itemstwo">
          <h3 class="tit"> <i class="icon icon51"></i>引用模型<span class="optional">（选填）</span></h3>
          <div class="models">
            <ul class="model-select">
              <li class="item" v-for="(item, index) in modelData" :key="index">
                <span class="sel-name">{{item.modelName}}</span>
                <i @click.stop="delModelItem(index)" class="sel-close el-icon-close"></i>
              </li>
            </ul>
            <div class="model-type">
              <!-- <el-select v-model="modelState" placeholder="选择模型">
                <el-option value=1 label="我的模型"></el-option>
                <el-option value=2 label="公开模型"></el-option>
              </el-select> -->
              <el-popover
                placement="bottom"
                width="100"
                trigger="hover"
                popper-class="model-type-wra"
                v-model="modelStateShow">
                <div class="model-type-pupop">
                  <span class="item active" @click="selectModelType(1)">我的模型</span>
                  <span class="item" @click="selectModelType(2)">公开模型</span>
                </div>
                <div class="model-type-btn" slot="reference" :class="{'model-type-btn-active': modelStateShow}">
                  <span class="txt" v-if="modelState == 1">我的模型</span>
                  <span class="txt" v-else-if="modelState == 2">公开模型</span>
                  <span class="txt" v-else>选择模型</span>
                  <i class="icon el-icon-arrow-down"></i>
                </div>
              </el-popover>
            </div>
          </div>
        </div>

        <div class="items">
          <h3 class="tit"> <i class="icon icon5"></i>选择数据集 （选填）</h3>
          <div class="dataset">
            <div class="dataset-action">
              <el-button size="medium" class="dataset-button" @click="clickAddDataSet" icon="el-icon-plus">
                添加数据集
              </el-button>
              <span class="dataset-text">
                你也可以
                <a @click="toUploadDataSet">上传新的数据集</a>
              </span>
            </div>
            <div class="dataset-lists-box" v-show="selectedDataSet.length > 0">
              <ul class="dataset-lists">
                <li class="dataset-list" v-for="(item, index) in selectedDataSet" :key="index">
                  <span class="list-name">{{item.name}}</span>
                  <i class="list-btn el-icon-close" @click="removeSelectedDataSet(index, item.id)"></i>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="items">
          <el-button class="sava-edit-btn" type="primary" @click="submit">保存</el-button>
        </div>
        <el-dialog
          :visible.sync="dialogDataSet"
          class="dialog-data-set"
          width="690px">
          <span slot="title" class="dialog-header">
            <ul class="dataset-tabs">
              <li class="dataset-tabs-item" :class="{'active': activeTab === 1}" @click="toggleDataSetActive(1)">
                我的数据集
              </li>
              <li class="dataset-tabs-item" :class="{'active': activeTab === 2}" @click="toggleDataSetActive(2)">
                公开数据集
              </li>
            </ul>
            <div class="wra">
              <input type="text" class="data-set-key" v-model="detaSetKey" placeholder="请输入关键字">
              <i class="el-icon-search data-set-search"></i>
            </div>
          </span>
          <div class="dialog-dataset-container">
            <section class="dialog-dataset">
              <ul class="dialog-dataset-list">
                <!-- :class="{'dataset-selected' : item.hasSelected}" -->
                <li
                  v-for="(item, index) in activeTab === 1 ? myDataSetOptions : publicDataSetOptions"
                  class="list-item"
                  :class="{'dataset-selected' : item.id == selectDataSetID}"
                  :key="index"
                  @click="toggleSelDataSet(item.id)"
                >
                  <img class="deta-set-image" :src="item.coverUrl ? item.coverUrl : dattSetImgUrl">
                  <div class="data-set-info">
                    <div class="item-title">{{item.name}}</div>
                    <div class="item-profile">{{item.profile ? item.profile : '-'}}</div>
                  </div>
                </li>
                <li class="item-spe" v-show="activeTab == 1 && myDataSetOptions.length == 0">暂无数据</li>
                <li class="item-spe" v-show="activeTab == 2 && publicDataSetOptions.length == 0">暂无数据</li>
              </ul>
            </section>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button class="dialog-footer-btn" type="primary" @click="clickSelectDataSet">添 加</el-button>
            <el-button class="dialog-footer-btn" @click="dialogDataSet = false">取 消</el-button>
          </span>
        </el-dialog>

        <!-- 模型选择弹窗 -->
        <el-dialog
          :visible.sync="dialogModel"
          @close="dialogModelCLose"
          class="dialog-model"
          width="690px">
          <span slot="title" class="dialog-header">
            <div class="wra">
              <input type="text" class="data-set-key" v-model="modelSetKey" placeholder="请输入关键字">
              <i class="el-icon-search data-set-search"></i>
            </div>
          </span>
          <ul class="dialog-model-container">
            <li class="item" @click="selectModel(item.id)" v-for="(item, index) in modelListCopy" :key="index" :class="{'active' : item.id == modelSelectId}">
              <h4 class="tit">{{item.modelName}}</h4>
              <span class="desc">{{item.modelIntroduction}}</span>
            </li>
            <li class="item-spe" v-show="modelListCopy.length == 0">暂无数据</li>
            <!-- <li class="item active">
              <h4 class="tit">Yolo_v3 Object</h4>
              <span class="desc">这是一个利用TensorFlow测试mnist数据集的项目。这是一个利用TensorFlow</span>
            </li> -->
          </ul>
          <span slot="footer" class="dialog-footer">
            <el-button class="dialog-footer-btn" type="primary" @click="clickSelectModelSet">添 加</el-button>
            <el-button class="dialog-footer-btn" @click="dialogModel = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import dataSetImg from '@/common/image/dataset.jpg'
import { projectEdit } from '../../api/project'
import { frameworkGetList, languageGetList } from '../../api/image'
import { getUserDataSet, getDataSet, optionalDataSetExceptOwnAndAttention } from '@/api/dataset'
import { getUserModels, getPublicModelsExceptOwn, getProjectUseModels } from '@/api/model'
// import { randomNumber, isNewId } from '../../common/js/getRandCharacter'

export default {
  data () {
    return {
      // 项目验证规则
      rulesForm: {
        profile: [
          {
            required: false,
            trigger: 'blur'
          }, {
            max: 100,
            message: '简介内容不能超过100个字符'
          }
        ]
      },
      // 项目参数
      projectForm: {
        profile: ''
      },
      // 项目名称
      jobName: '',
      // 编程语言
      language: '',
      // 编程语言集合
      languageArr: [],
      // 算法框架
      algorithm: '',
      // 算法框架集合
      algorithmArr: [],
      // 项目描述
      profile: '',
      // 数据集列表显示
      dialogDataSet: false,
      // 数据集选项-我的数据集
      myDataSetOptions: [],
      // 数据集选项-公开数据集
      publicDataSetOptions: [],
      // 我的数据集选项 添加关键字
      myDataSetOptionsKey: [],
      // 公开数据集选项 添加关键字
      publicDataSetOptionsKey: [],
      // 数据集默认图片
      dattSetImgUrl: dataSetImg,
      // 待选数据集
      selectDataSet: [],
      // 待选数据集 ID
      selectDataSetID: '',
      // 已选数据集IDs
      selectedDataSetIndexs: [],
      // 已选数据集
      selectedDataSet: [],
      // 数据集关键字
      detaSetKey: '',
      activeTab: 1,
      // 模型搜索关键词
      modelSetKey: '',
      // 模型 类型
      modelState: '',
      // 选择模型id
      modelSelectId: '',
      // 选择模型数据
      modelData: [],
      // 模型列表
      modelList: [],
      modelListCopy: [],
      // 模型弹出 显示
      dialogModel: false,
      modelStateShow: false
    }
  },
  methods: {
    // 模型列表显示
    // showItemList () {
    //   if (this.modelState) {
    //     if (this.modelData.length > 0) {
    //       this.$message({ message: '只能选择一个模型', showClose: true, type: 'warning' })
    //       return false
    //     }
    //     this.modelSelectId = ''
    //     this.dialogModel = true
    //     this.getModelsList()
    //   } else {
    //     this.$message({ message: '请选择模型', showClose: true, type: 'warning' })
    //   }
    // },
    selectModelType (index) {
      if (this.modelData.length === 3) {
        this.$message({ message: '最多添加3个模型', showClose: true, type: 'warning' })
        return false
      }
      this.modelState = index
      this.modelSelectId = ''
      this.dialogModel = true
      this.getModelsList()
    },
    // 删除已选中的模型
    delModelItem (index) {
      this.modelData.splice(index, 1)
    },
    // 获取模型列表
    getModelsList () {
      // modelList
      let query = `?pageNumber=1&pageSize=9999`
      if (this.modelState && parseInt(this.modelState) === 1) {
        getUserModels(query).then(res => {
          this.modelList.length = 0
          this.modelListCopy.length = 0
          if (res.message.code === 0) {
            this.modelList = [...res.data.list]
            this.modelListCopy = [...res.data.list]
          }
        })
      } else {
        getPublicModelsExceptOwn(query).then(res => {
          this.modelList.length = 0
          this.modelListCopy.length = 0
          if (res.message.code === 0) {
            this.modelList = [...res.data.list]
            this.modelListCopy = [...res.data.list]
          }
        })
      }
    },
    // 模型选择
    selectModel (id) {
      this.modelSelectId = id
    },
    // 模型添加
    clickSelectModelSet () {
      // this.modelData = []
      this.modelListCopy.forEach(item => {
        if (item.id === this.modelSelectId) {
          let state_ = false
          this.modelData.forEach(list => {
            if (this.modelSelectId === list.id) state_ = true
          })
          if (!state_) this.modelData.push(item)
        }
      })
      this.dialogModel = false
    },
    // 查询项目引用的模型
    _getProjectUseModels () {
      let query = `?projectId=${this.curProject.id}`
      getProjectUseModels(query).then(res => {
        if (res.message.code === 0) {
          this.modelData = [...res.data]
        }
      })
    },
    toggleDataSetActive (val) {
      this.activeTab = val
      this.detaSetKey = ''
    },
    // 点击添加数据集弹框
    clickAddDataSet () {
      this.detaSetKey = ''
      this.dialogDataSet = true
    },
    // Toggle选择数据集
    toggleSelDataSet (index) {
      this.selectDataSetID = index
    },
    // 选择数据集
    clickSelectDataSet () {
      if (!this.selectDataSetID || this.selectDataSetID === -1) {
        this.$message({ message: '请选择需要添加的数据集', showClose: true, type: 'warning' })
        return false
      }
      this.dialogDataSet = false
      if (this.selectedDataSetIndexs.length >= 3) {
        this.$message({ message: '最多添加3个数据集', showClose: true, type: 'warning' })
      } else {
        this.selectedDataSetIndexs.push(this.selectDataSetID)
        this.selectedDataSetIndexs = [...new Set(this.selectedDataSetIndexs)]
        this.selectedDataSet.length = 0
        this.myDataSetOptionsKey.map(item => {
          this.selectedDataSetIndexs.map(list => {
            if (list === item.id) {
              this.selectedDataSet.push(item)
            }
          })
        })
        this.publicDataSetOptionsKey.map(item => {
          this.selectedDataSetIndexs.map(list => {
            if (list === item.id) {
              this.selectedDataSet.push(item)
            }
          })
        })
      }
      this.selectDataSetID = -1
    },
    // 删除已添加数据集
    removeSelectedDataSet (index, id) {
      let index_ = -1
      this.selectedDataSetIndexs.map((item, index) => {
        if (item === id) index_ = index
      })
      this.selectedDataSetIndexs.splice(index_, 1)
      this.selectedDataSet.splice(index, 1)
    },
    // 创建项目
    submit () {
      this.$refs.projectForm.validate((valid) => {
        if (valid) {
          this._projectEdit()
        }
      })
    },
    // 打开上传数据集新窗口
    toUploadDataSet () {
      const { href } = this.$router.resolve({
        name: 'dataSetCreate',
        path: '/dataset/create'
      })
      window.open(href, '_blank')
    },
    // 关闭模型窗口
    dialogModelCLose () {
      this.modelSetKey = ''
    },
    // ------调用接口请求数据--------
    // 保存项目
    _projectEdit () {
      let dataSet = []
      let dataSetIds = ''
      let modelIds = ''
      this.modelData && this.modelData.forEach(item => {
        modelIds += item.id + ','
      })
      this.selectedDataSet && this.selectedDataSet.forEach(item => {
        dataSetIds += item.id + ','
        let bePushItem = {
          datasetId: item.name,
          owner: '',
          mountPath: item.path.replace('datasets', 'data'),
          token: '',
          share: ''
        }
        dataSet.push(bePushItem)
      })
      // if (dataSet.length === 0) dataSet.push('')
      // if (dataSetIds.indexOf(',') > -1) dataSetIds = dataSetIds.substring(0, dataSetIds.length - 1)
      let configObj = JSON.parse(this.curProject.config)
      configObj.datasets = dataSet
      const data = {
        dataSet: dataSet,
        filePath: `/${this.curProject.projectName}/code`,
        id: this.curProject.id,
        notes: this.curProject.notes,
        profile: this.projectForm.profile,
        projectName: this.curProject.projectName,
        userId: this.userInfo.userId,
        language: this.language,
        algorithm: this.algorithm,
        config: JSON.stringify(configObj)
      }

      dataSetIds = dataSetIds.substr(0, dataSetIds.length - 1)
      modelIds = modelIds.substr(0, modelIds.length - 1)
      const para = `?dataSetIds=${dataSetIds}&modelIds=${modelIds}`
      projectEdit(para, data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '保存成功', showClose: true, type: 'success' })
          this.storeProject(res.data)
          this.$router.push({
            'path': '/project/detail/task',
            'query': {
              'projectid': this.curProject.id
            }
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取我上传的数据集
    _getMyDataSetList () {
      let query = `?cp=1&ps=10000`
      getDataSet(query).then(res => {
        if (res.message.code === 0) {
          this.myDataSetOptions = [...res.data.list]
          this.myDataSetOptionsKey = [...res.data.list]
          this._getAttentionDataSetList()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取我关注的数据集
    _getAttentionDataSetList () {
      let query = `?pageNumber=1&pageSize=100000&dataSetType=1`
      getUserDataSet(query).then(res => {
        if (res.message.code === 0) {
          this.myDataSetOptions = this.myDataSetOptions.concat(res.data.list)
          this.myDataSetOptionsKey = this.myDataSetOptionsKey.concat(res.data.list)
          this.myDataSetOptionsKey.forEach(list => {
            JSON.parse(this.curProject.config).datasets.forEach(item => {
              if (list.path.replace('datasets', 'data') === item.mountPath) {
                this.selectedDataSetIndexs.push(list.id)
                this.selectedDataSet.push(list)
              }
            })
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 获取公开数据集列表
    _getPublicDataSetList () {
      const query = `?pageNumber=1&pageSize=100000`
      optionalDataSetExceptOwnAndAttention(query).then(res => {
        if (res.message.code === 0) {
          this.publicDataSetOptions = [...res.data.list]
          this.publicDataSetOptionsKey = [...res.data.list]
          res.data.list.forEach(list => {
            JSON.parse(this.curProject.config).datasets.forEach(item => {
              if (list.path.replace('datasets', 'data') === item.mountPath) {
                this.selectedDataSetIndexs.push(list.id)
                this.selectedDataSet.push(list)
              }
            })
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    _frameworkGetList () {
      frameworkGetList().then(res => {
        if (res.message.code === 0) {
          this.algorithmArr = [...res.data]
          this.algorithm = this.curProject.algorithm
        }
      })
    },
    _languageGetList () {
      languageGetList().then(res => {
        if (res.message.code === 0) {
          this.languageArr = [...res.data]
          this.language = this.curProject.language
        }
      })
    },
    ...mapMutations({
      storeProject: 'SET_CUR_PROJECT'
    })
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'curProject'
    ])
  },
  watch: {
    detaSetKey () {
      if (this.activeTab === 1) {
        this.myDataSetOptions.length = 0
        this.myDataSetOptionsKey.forEach(item => {
          if (item.name.toLowerCase().indexOf(this.detaSetKey.toLowerCase()) > -1) {
            this.myDataSetOptions.push(item)
          }
        })
      } else {
        this.publicDataSetOptions.length = 0
        this.publicDataSetOptionsKey.forEach(item => {
          if (item.name.toLowerCase().indexOf(this.detaSetKey.toLowerCase()) > -1) {
            this.publicDataSetOptions.push(item)
          }
        })
      }
    },
    modelSetKey () {
      this.modelListCopy.length = 0
      this.modelList.forEach(item => {
        if (item.modelName.toLowerCase().indexOf(this.modelSetKey.toLowerCase()) > -1) {
          this.modelListCopy.push(item)
        }
      })
    }
  },
  mounted () {
    this._getMyDataSetList()
    this._getPublicDataSetList()
    this._frameworkGetList()
    this._languageGetList()
    this._getProjectUseModels()
    this.jobName = this.curProject.projectName
    this.projectForm.profile = this.curProject.profile
  }
}
</script>

<style lang="stylus">
.pro-create-edit
  width 100%
  background #fff
  .wrapper
    width 1162px
    margin 0 auto
    padding: 64px 0
    font-size 0
    .create-left
      display inline-block
      width 294px
      text-align right
      vertical-align top
      .icon
        display inline-block
        width 139px
        height 76px
        background url(../../common/image/icon-project/icon-create-edit.png) no-repeat center
        background-size 139px 76px
    .create-right
      display inline-block
      width 868px
      padding-left 32px
      .title
        height 100px
        line-height 110px
        font-size 28px
        color #2D323B
        font-family 'PingFangSC-Medium'
        font-weight 600
      .items
        width 434px
        padding-top 25px
        .tit
          width 100%
          height 30px
          padding-bottom 10px
          line-height 22px
          font-family PingFangSC-Medium
          font-size 14px
          color #2D323B
          font-weight 600
          .icon
            display inline-block
            width 22px
            height 20px
            vertical-align top
          .icon1
            background url(../../common/image/icon-project/icon-project-name.png) no-repeat center
            background-size 13px 15px
          .icon4
            background url(../../common/image/icon-project/icon-project-desc.png) no-repeat center
            background-size 15px 15px
          .icon5
            background url(../../common/image/icon-project/icon-project-dataSet.png) no-repeat center
            background-size 13px 11px
          .icon51
            background url(../../common/image/icon-project/icon-model.png) no-repeat center
            background-size 14px 14px
          .icon6
            background url(../../common/image/icon-project/icon-project-upload.png) no-repeat center
            background-size 15px 15px
        .item-tit
          display flex
          justify-content space-between
          .item-name
            flex 0 0 200px
            height 30px
            padding-bottom 10px
            line-height 22px
            font-family 'PingFangSC-Medium'
            font-size 14px
            color #2D323B
            font-weight 600
            .icon
              display inline-block
              width 22px
              height 20px
              vertical-align top
            .icon2
              background url(../../common/image/icon-project/icon-project-language.png) no-repeat center
              background-size 15px 15px
            .icon3
              background url(../../common/image/icon-project/icon-project-algorithm.png) no-repeat center
              background-size 15px 12px
        .item-con
          display flex
          justify-content space-between
          .item-select
            flex 0 0 200px
        .models
          width 100%
          display flex
          .model-select
            flex 0 0 314px
            padding 6px 10px 0 10px
            background #FFFFFF
            border 1px solid #CCCCCC
            border-radius 3px
            font-size 0
            .item
              display inline-block
              height 26px
              line-height 24px
              padding 0 8px
              margin-right 8px
              margin-bottom 6px
              background #F4F4F4
              border 1px solid #CCCCCC
              border-radius 4px
              font-size 0
              .sel-name
                display inline-block
                padding-right 14px
                font-size 12px
                color #2D323B
              .sel-close
                display inline-block
                font-size 14px
                cursor pointer
          .model-type
            flex 1
            height 40px
            margin-left 20px
            .model-type-btn
              width 100px
              height 40px
              line-height 40px
              border 1px solid #ccc
              font-size 16px
              text-align center
              border-radius 4px
              outline none
              cursor pointer
              .txt
                font-size 14px
                color #333
                padding-right 6px
              .icon
                color #333
            .model-type-btn-active
              border-color #2E94F9
              .txt
                color #2E94F9
              .icon
                color #2E94F9
        .dataset
          width 100%
          .dataset-action
            display flex
            .dataset-button
              flex 0 0 200px
            .dataset-text
              flex 1
              padding-left 12px
              line-height 36px
              font-size 14px
          .dataset-lists-box
            width 100%
            padding 20px 0
            padding-bottom 0
            .dataset-lists
              .dataset-list
                display inline-block
                padding: 10px
                border 1px solid #d2d2d2
                border-radius 4px
                margin-right 10px
                margin-bottom 10px
                .list-name
                  font-size 14px
                  color #333
                  padding-right 10px
                .list-btn
                  font-size 14px
                  color #333
                  cursor pointer
        .sava-edit-btn
          width 200px
      .itemstwo
        padding-top 0
.dialog-data-set
  .el-dialog__header
    height 66px
    background #F4F7F8
    padding 19px 50px 0 50px
    .el-dialog__headerbtn
      .el-dialog__close
        font-size 28px
    .dialog-header
      display flex
      justify-content space-between
      height 100%
      .dataset-tabs
        display flex
        align-items flex-end
        height 100%
        .dataset-tabs-item
          height 100%
          padding 0 21px
          font-size 14px
          display flex
          align-items center
          justify-content center
          cursor pointer
        .active
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
      .titl
        flex 0 0 140px
        font-size 18px
        color #333
        font-weight 600
      .wra
        flex 0  0 282px
        height 34px
        background #fff
        font-size 0
        .data-set-key
          display inline-block
          width 90%
          height 34px
          line-height 34px
          font-size 14px
          text-indent 12px
          border none
          &:focus
            border 0
            outline none
            background rgba(0, 0, 0, 0)
        .data-set-search
          display inline-block
          width 10%
          line-height 34px
          font-size 20px
          text-align center
          cursor pointer
  .dialog-dataset
    width 100%
    padding 0 30px
    .dialog-dataset-list
      width 100%
      max-height 400px
      overflow-y auto
      .list-item
        display flex
        width 99%
        padding 18px 26px
        background #F4F7F8
        margin-bottom 18px
        cursor pointer
        .deta-set-image
          flex 0 0 72px
          width 72px
          height 72px
        .data-set-info
          padding-left 24px
          .item-title
            width 426px
            height 48px
            line-height 40px
            font-family PingFangSC-Medium
            font-size 24px
            color #2D323B
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .item-profile
            width 426px
            height 24px
            font-size 14px
            color #6E6E6E
            letter-spacing 0
            line-height 24px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
      .dataset-selected
        border 1px solid #2196F3
      .item-spe
        text-align center
  .el-dialog__footer
    text-align center
    .dialog-footer
      width 100%
      .dialog-footer-btn
        display inline-block
        width 96px
        height 36px
        line-height 36px
        padding-top 0
        padding-bottom 0
.dialog-model
  .el-dialog__header
    // height 66px
    padding 26px 50px 34px 50px
    .el-dialog__headerbtn
      .el-dialog__close
        font-size 28px
    .dialog-header
      width 100%
      .wra
        display flex
        width 310px
        height 34px
        background #fff
        font-size 0
        border 1px solid #D1D2D3
        border-radius 4px
        overflow hidden
        .data-set-key
          display inline-block
          width 90%
          height 32px
          line-height 32px
          font-size 14px
          text-indent 12px
          border none
          &:focus
            border 0
            outline none
            background rgba(0, 0, 0, 0)
        .data-set-search
          display inline-block
          width 10%
          line-height 32px
          font-size 20px
          text-align center
          cursor pointer
  .el-dialog__body
    padding 0
    .dialog-model-container
      width 100%
      max-height 516px
      overflow-y auto
      padding-bottom 24px
      .item
        width 100%
        padding 18px 70px 14px 50px
        cursor pointer
        &:hover
          background #F4F7F8
        .tit
          padding-bottom 8px
          line-height 22px
          font-size 16px
          color #2D323B
          font-weight 600
        .desc
          display block
          width 100%
          line-height 24px
          font-size 14px
          color #6E6E6E
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
      .active
        border 1px solid #2E94F9
      .item-spe
        text-align center
  .el-dialog__footer
    text-align center
    .dialog-footer
      width 100%
      padding-bottom 40px
      .dialog-footer-btn
        display inline-block
        width 96px
        height 36px
        line-height 36px
        padding-top 0
        padding-bottom 0
.select-model-type
  .el-select-dropdown__list
    .selected
      color #3DA8FD
      font-weight 500
    .hover
      background #F1F8FF
      color #3DA8FD
.model-type-wra
  min-width 100px
  padding-left 0
  padding-right 0
  .model-type-pupop
    .item
      display block
      height 32px
      line-height 32px
      text-align center
      font-size 14px
      color #2D323B
      cursor pointer
      &:hover
        color #3DA8FD
        background #F1F8FF
    .active
      color #3DA8FD
      background #F1F8FF
</style>
